<template>
  <div id="readingList">
    <ul class="reading_box">
      <li class="reading" v-for="article in articlelist" :key="article.id">
        <router-link class="readingGo" :to="{ name: 'readingdetail', query: { id: article.id }}">
          <h3>{{article.title}}</h3>
          <div class="dec_box">
            <p v-html="article.text"></p><span>>></span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import {} from "vux";
export default {
  data() {
    return {
      articlelist:[], //文章列表
    };
  },
  created() {
    this.apiService.article.readingarticlelist().then(res => {
      this.articlelist = res.data.readingarticlelist;
      this.articlelist.forEach((a)=>{
        a.text = a.content.replace(/<[^>]*>|/g,"")
      })
    });
  },
  components: {},
  methods: {}
};
</script>
<style scoped>
#readingList {
  height: 100%;
  background-color: #fff;
}
.reading {
  position: relative;
  padding: 0.25rem 1.2rem 0.25rem 0.25rem;
  background-color: #fff;
}
.reading h3 {
  color: #000;
  font-size: 0.3rem;
  margin-bottom: 0.25rem;
}
.dec_box {
  position: relative;
}
.dec_box p {
  font-size: 0.25rem;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dec_box span {
  font-size: 0.25rem;
  color: rgb(0, 121, 254);
  position: absolute;
  right: -1rem;
  top: 0;
}
.reading::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
